<template>
  <div>
    <Header></Header>
    <div>
      <!--End Menu End-->
      <div class="i_bg">
        <div class="postion">
        </div>
        <!--Begin 筛选条件 Begin-->
        <div class="content mar_10">
          <table border="0" class="choice" style="width:100%; font-family:'宋体'; margin:0 auto;" cellspacing="0" cellpadding="0">
            <tr valign="top">
              <td width="70">&nbsp; 品牌：</td>
              <td class="td_a">
                <a @click="queryByBrandName(null)" class="now" >全部</a>
                <a @click="queryByBrandName('bosie')" >bosie</a>
              </td>
            </tr>
            <tr valign="top">
              <td>&nbsp; 价格：</td>
              <td class="td_a">
                <a @click="queryGoods(null,null)" class="now">全部</a>
                <a @click="queryGoods(0,199)">0-199</a>
                <a @click="queryGoods(200,399)" >200-399</a>
                <a @click="queryGoods(400,599)" >400-599</a>
                <a @click="queryGoods(600,10000)">600以上</a>
              </td>
            </tr>

          </table>
        </div>
        <!--End 筛选条件 End-->

        <div class="content mar_20">
          <div class="l_history">
            <div class="his_t">
              <span class="fl">浏览历史</span>
              <span class="fr"><a href="#">清空</a></span>
            </div>
            <ul>
              <li>
                <div class="img"><a href="#"><img src="/static/images/his_1.jpg" width="185" height="162" /></a></div>
                <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                <div class="price">
                  <font>￥<span>368.00</span></font> &nbsp; 18R
                </div>
              </li>
              <li>
                <div class="img"><a href="#"><img src="/static/images/his_2.jpg" width="185" height="162" /></a></div>
                <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                <div class="price">
                  <font>￥<span>768.00</span></font> &nbsp; 18R
                </div>
              </li>
              <li>
                <div class="img"><a href="#"><img src="/static/images/his_3.jpg" width="185" height="162" /></a></div>
                <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                <div class="price">
                  <font>￥<span>680.00</span></font> &nbsp; 18R
                </div>
              </li>
              <li>
                <div class="img"><a href="#"><img src="/static/images/his_4.jpg" width="185" height="162" /></a></div>
                <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                <div class="price">
                  <font>￥<span>368.00</span></font> &nbsp; 18R
                </div>
              </li>
              <li>
                <div class="img"><a href="#"><img src="/static/images/his_5.jpg" width="185" height="162" /></a></div>
                <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                <div class="price">
                  <font>￥<span>368.00</span></font> &nbsp; 18R
                </div>
              </li>
            </ul>
          </div>
          <div class="l_list">
            <div class="list_t">
            	<span class="fl list_or">
                	<a @click="queryOrder('g.goods_id','asc')" class="now">默认</a>
                  <a @click="queryOrder('g.shop_price','asc')" >价格从低到高</a>
                  <a @click="queryOrder('g.shop_price','desc')" >价格从高到低</a>
                </span>
              <span class="fr">共发现{{total}}件</span>
            </div>
            <div class="list_c">

              <ul class="cate_list">
                <li v-for="x in list">
                  <div class="img"><a @click="toGoodsDetail(x)"><img :src="x.goodsImg" width="210" height="185" /></a></div>
                  <div class="price">
                    <font>￥<span>{{x.shopPrice}}</span></font> &nbsp; 26R
                  </div>
                  <div class="name"><a href="#">{{x.goodsName}}</a></div>

                </li>

              </ul>

              <div class="pages">
                <a @click="prePage()" class="p_pre">上一页</a><a href="#" class="cur">{{goodsParameter.page}}</a><a href="#">一共{{totalPage}}页</a><a @click="nextPage" class="p_pre">下一页</a>
              </div>



            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from "../common/Header";
  import Footer from "../common/Footer";
  export default {
    name: "GoodsList",
    components:{
      Header,
      Footer
    },
    data(){
      return {
        goodsParameter: {
          goodTypeId: 1,
          brandName: null,
          page:1,
          size:6,
          startPrice:null,
          endPrice:null,
          colName:"g.goods_id",
          orderType:"asc"
        },
        list:[],
        totalPage:0,
        total:0
      }
    },
    methods:{
         loadGoodsList(){
            const self = this;
            const http = this.$http.get("/server-goods-info/goods-info/goods/1",{params:this.goodsParameter});
            http.then(function (rs) {
                  console.log(rs);
                  if(rs.data.code==200){
                      self.list = rs.data.data.list;
                      self.totalPage = rs.data.data.totalPage;
                      self.total = rs.data.data.total;
                  }
            })
         },
         prePage(){//上一页
            //页码递减
            this.goodsParameter.page--;
            if(this.goodsParameter.page<=1){
              this.goodsParameter.page=1;
            }
            //查询
            this.loadGoodsList();
         },
         nextPage(){//下一页
            //页码递增
            this.goodsParameter.page++;
            //不能大于总页数
            if(this.goodsParameter.page>=this.totalPage){
              this.goodsParameter.page=this.totalPage;
            }
            //查询
            this.loadGoodsList();
         },
        queryByBrandName(name){//品牌查询
           this.goodsParameter.brandName=name;
          //查询
          this.loadGoodsList();
       },
       queryGoods(start,end){//价格查询
           this.goodsParameter.startPrice =start;
           this.goodsParameter.endPrice = end;
           //查询
          this.loadGoodsList();
      },
      queryOrder(col,type){//排序
           this.goodsParameter.colName=col;
           this.goodsParameter.orderType=type;
           //查询
           this.loadGoodsList();
      },
      toGoodsDetail(x){
        //跳转到商品详情页面
        window.location.href="/goodsDetail";
        localStorage.setItem("x",JSON.stringify(x));

      }
    },
    created() {
      //获取商品类型id
      this.goodsParameter.goodTypeId = localStorage.getItem("id");
       this.loadGoodsList();


    }

  }
</script>

<style scoped>

</style>
